<template>
  <div class="container">
    <el-card>
      <!-- 搜索框 -->
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6"
          >关键字
          <el-input
            v-model="input"
            placeholder="请输入编号查询"
            style="width: 300px"
          ></el-input
        ></el-col>
        <el-col :span="4">
          <el-button @click="emptys">清空</el-button>
          <el-button type="primary" @click="reds(input)"
            >搜索</el-button
          ></el-col
        >
      </el-row>
      <!-- 灰色数据 -->

      <div>
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          :closable="false"
          class="el-icon-info"
        >
        </el-alert>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>

        <el-table-column prop="questionType" label="题型">
          <template slot-scope="{ row }">
            <!-- {{row.questionType}} -->
            <div v-if="row.questionType === '1'">单选</div>
            <div v-else-if="row.questionType === '2'">多选</div>
            <div v-else-if="row.questionType === '3'">简答</div>
          </template>
        </el-table-column>

        <el-table-column label="题目编号" width="200px">
          <template slot-scope="{ row }">
            <el-link type="primary" :underline="false">
              <div v-for="(item, index) in row.questionIDs" :key="index">
                <a href="#" @click="btnA(item.id)">{{ item.number }}</a>
              </div>
            </el-link>

            <!-- {{row.questionIDs}} -->
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作"
          ><template slot-scope="{ row }">
            <el-button
              @click="btn(row)"
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              title="删除"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="1"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        >>
      </el-pagination>
      <!-- 对话框 -->
    </el-card>

    <quseran
      :showDialog.sync="showDialog"
      :questionsData="questionsData"
    ></quseran>
  </div>
</template>

<script>
// import { questionType } from '@/api/hmmm/constants.js'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import quseran from '@/module-hmmm/components/questions-preview.vue'

// import { difficulty } from '@/api/hmmm/constants.js'
export default {
  components: {
    quseran
  },
  data () {
    return {
      questionType: '',
      input: '',
      data: {},
      questionsData: {},
      showDialog: false,
      currentPage1: 1,
      total: 1,
      requestParameters: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      tableData: []
    }
  },
  created () {
    this.getEmp()
    // console.log(questionType)
  },
  methods: {
    // 获取列表数据

    async getEmp () {
      const res = await randoms()

      console.log(res, 'tableData')
      this.tableData = res.data.items
      this.total = res.data.counts

      console.log(res.data.items.length, 522)
    },
    // 分页1
    handleSizeChange (val) {
      console.log(555)
      console.log(`每页 ${val} 条`)
      this.requestParameters.pagesize = val

      this.getEmp()
    },
    // 分页2
    handleCurrentChange (val) {
      console.log(666)
      console.log(`当前页: ${val}`)
      this.requestParameters.page = val

      this.getEmp()
    },
    // 删除按钮
    async btn (id) {
      console.log(id)
      const res = await this.$confirm(
        '此操作将永久删除该题组, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
      console.log(res, 123)
      if (res === 'confirm') {
        const res = await removeRandoms(id)
        console.log(res, 123)
        if (res.status === 200) {
          this.getEmp() // 刷新页面
        }
      }
    },
    // 搜索框
    reds () {
      this.requestParameters.page = 1
      this.requestParameters.keyword = this.input
      this.getEmp(this.requestParameters)
    },
    // 清空
    emptys () {
      this.input = null
      this.getEmp()
    },
    async btnA (id) {
      const { data } = await detail({ id })
      console.log(data, 123123123)
      this.showDialog = true
      this.questionsData = data
    }
  }
}
</script>

<style scoped lang="scss"></style>
